<template>
  <div class="hex-wrap">
    <div :class="['hex-border', typeClass]">
      <div class="hex-inner">
        <div class="hex-title">{{ displayType }}</div>
        <div class="hex-num"><slot /></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: value => ['pending', 'processing', 'completed', 'overdue'].includes(value)
  }
});

const displayType = computed(() => {
  const types = {
    pending: '待进行',
    processing: '进行中',
    completed: '已完成',
    overdue: '已超期'
  };
  return types[props.type];
});

const typeClass = computed(() => {
  const classes = {
    pending: 'pending',
    processing: 'processing',
    completed: 'completed',
    overdue: 'overdue'
  };
  return classes[props.type];
});
</script>

<style scoped>
/* 设置基础缩放比例（可全局或局部修改） */
.hex-wrap,
.hex-border,
.hex-inner {
  --base-scale: 50; /* 默认为 100%，即原始大小 */
}

/* 计算函数：用于动态计算 vw 值 */
@function scale($value) {
  @return ($value * var(--base-scale) / 100) + vw;
}

.hex-wrap {
  width: calc(var(--base-scale) * 13.02 / 100 * 1vw);
  height: calc(var(--base-scale) * 15 / 100 * 1vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-border {
  width: calc(var(--base-scale) * 13.02 / 100 * 1vw);
  height: calc(var(--base-scale) * 15 / 100 * 1vw);
  position: relative;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  background: #2ee6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-inner {
  width: calc(var(--base-scale) * 12.03 / 100 * 1vw);
  height: calc(var(--base-scale) * 13.84 / 100 * 1vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  background: linear-gradient(180deg, #2ee6ff 0%, #1a8fa6 100%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--base-scale) * 0.1 / 100 * 1vw);
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 0 calc(var(--base-scale) * 1.25 / 100 * 1vw) calc(var(--base-scale) * 0.1 / 100 * 1vw) #2ee6ff55; */
}
.hex-title {
  font-size: calc(var(--base-scale) * 2.5 / 100 * 1vw);
  font-weight: 500;
  color: #fff;
  margin-bottom: calc(var(--base-scale) * 1.25 / 100 * 1vw);
  margin-top: calc(var(--base-scale) * 1.56 / 100 * 1vw);
  /* text-shadow: 0 calc(var(--base-scale) * 0.1 / 100 * 1vw) calc(var(--base-scale) * 0.42 / 100 * 1vw) #0008; */
  letter-spacing: calc(var(--base-scale) * 0.1 / 100 * 1vw);
}
.hex-num {
  font-size: calc(var(--base-scale) * 2.92 / 100 * 1vw);
  font-weight: bold;
  color: #fff;
  /* text-shadow: 0 calc(var(--base-scale) * 0.1 / 100 * 1vw) calc(var(--base-scale) * 0.42 / 100 * 1vw) #0008; */
  margin-bottom: calc(var(--base-scale) * 1.56 / 100 * 1vw);
}
/* pending: 'pending',
    processing: 'processing',
    completed: 'completed',
    overdue: 'overdue' */
.pending{
  background-color: #67FDFF;
}
.pending .hex-inner{
  background: linear-gradient(
    to right,
    #017D7D 0%,
    rgba(39, 120, 134, 0.65) 50%,
    #0C565B 100%
  );
}

.processing{
  background-color: #67FF77;
}
.processing .hex-inner{
  background: linear-gradient(
    to right,
    #017D7D 0%,
    rgba(39, 120, 134, 0.65) 50%,
    #0C5B22 100%
  );
}
.completed{
  background-color: #FFF067;
}
.completed .hex-inner{
  background: linear-gradient(
    to right,
    #7D6901 0%,
    rgba(134, 125, 39, 0.65) 50%,
    #7D6901 100%
  );
}
.overdue{
  background-color: #FF2F02;
}
.overdue .hex-inner{
  background: linear-gradient(
    to right,
    #7D0101 0%,
    rgba(134, 39, 39, 0.65) 50%,
    #5B0C0C 100%
  );
}

</style>
